<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="/WEB-INF/c.tld"%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="admin/Hui/lib/html5.js"></script>
<script type="text/javascript" src="admin/Hui/lib/respond.min.js"></script>
<script type="text/javascript" src="admin/Hui/lib/PIE_IE678.js"></script>

<![endif]-->
<link type="text/css" rel="stylesheet" href="admin/Hui/css/H-ui.css" />
<link type="text/css" rel="stylesheet"
	href="admin/Hui/css/H-ui.admin.css" />
<link type="text/css" rel="stylesheet"
	href="admin/Hui/font/font-awesome.min.css" />
<!--[if IE 7]>
<link href="admin/Hui/font/font-awesome-ie7.min.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type="text/javascript" src="admin/Hui/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="admin/Hui/lib/layer1.9/layer.js"></script>
<title>添加用户</title>
<style>
hr {
	height: 1px;
	background-color: #F0F0F0;
}
</style>

</head>
<body>
	<script>
		$(function() {
			$("#role_name").on(
					"blur",
					function() {
						$.post("role!checkRole.action", {
							role_name : $("#role_name").val()
						}, function(data, status) {
							if (data == 0) {
								$("#insert").bind(
										"click",
										function(event) {
											if ($("#role_name") != null
													|| $("#role_name") != "") {
												layer.msg('该用户名已存在,请重新输入');
												return false;
											}
										});
								layer.msg('该用户名已存在,请重新输入');
							}
						});
					});
		});
	</script>
	<nav class="breadcrumb">
		<span><img src="admin/images/leftico01.png" /></span> 系统管理 <span
			class="c-gray en">&gt;</span> 角色管理 <span class="c-gray en">&gt;</span>增加角色
	</nav>
	<div class="pd-20">
		<div class="Huiform">
			<form action="role!update.action" method="post">
				<table class="table table-bg">
					<tbody>
						<tr>
							<th width="100" class="text-r"><span class="c-red">*</span>
								角色名：</th>
							<td><input type="text" style="width: 500px"
								class="input-text" disabled="disabled" id="role_name"
								name="role_name" value="${role_name }"> <input
								type="hidden" name="role_name" value="${role_name }">
						</tr>

						<tr>
							<th class="text-r"><span class="c-red">*</span>角色描述：</th>
							<td><textarea name="role_des" style="width: 700px" cols=""
									rows="" class="textarea" placeholder="角色描述...最少输入10个字符"
									datatype="*10-100" dragonfly="true" nullmsg="角色描述不能为空！"
									errormsg="描述范围在10-100位之间">${role_des }</textarea></td>
						</tr>

						<tr>
							<th width="100" class="text-r"><span class="c-red">*</span>
								角色分配：</th>
							<td>
								<div class="col-sm-2">
									
									<ul>
										<c:forEach var="permission" items="${permissionList }">
										<li>
											
											<input type="checkbox" name="per_id" value="${permission.per_id }"
												
												<c:forEach var="perSet" items="${permissionSet }">
												
												<c:if test="${permission.per_id == perSet.per_id }">
													<c:out value=" checked"></c:out> 
												</c:if> 
												
												</c:forEach> />
											
											<label for="">${permission.per_name }</label>
											<ul>
												<c:forEach var="per" items="${permission.perSet }">
													<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;┣
														<input type="checkbox" name="per_id" value="${per.per_id }" 
															 datatype="*" nullMsg="请选择角色权限"
															 
															 <c:forEach var="perSet" items="${permissionSet }">
												
															<c:if test="${per.per_id == perSet.per_id }">
															<c:out value=" checked"></c:out> 
															</c:if> 
												
															</c:forEach>
															 
															 />
														<label for="">${per.per_name }</label>
													</li>
												</c:forEach>
											</ul>
										</li>
										</c:forEach>
									</ul>

								</div>
							</td>
						</tr>

						<tr>

							<th></th>
							<td><button class="btn btn-success radius" type="submit"
									id="insert">
									<i class="icon-ok"></i> 确定
								</button> <a href="javascript:history.go(-1);"
								class="btn btn-secondary radius" id="insert"> <i
									class="icon-ok"></i> 返回
							</a></td>
						</tr>
					</tbody>
				</table>
			</form>
		</div>
	</div>
	<%-- <script type="text/javascript" src="admin/Hui/lib/jquery.min.js"></script> --%>
	<script type="text/javascript" src="admin/Hui/lib/Validform_v5.3.2.js"></script>
	<script type="text/javascript" src="admin/Hui/js/H-ui.js"></script>
	<script type="text/javascript" src="admin/Hui/js/H-ui.admin.js"></script>
	<script type="text/javascript">
		$(".Huiform").Validform();
		$(function() {
			$("input[name=per_id]").click(
					function() {
						// 当选中或取消某个权限时，同时也选中或取消所有的下级权限
						$(this).siblings("ul").find("input").attr("checked",
								this.checked);
						// 当选中某个权限时，应同时选中他的直系上的权限。
						if (this.checked == true) { // 可以直接写为 if(this.checked){..}
							$(this).parents("li")
									.children("input[name=per_id]").attr(
											"checked", true);
						}
						// 当取消某个权限时，如果同级的权限都没有选择，就也取消上级权限
						else {
							if ($(this).parent().siblings("li").children(
									"input:checked").size() == 0) {
								$(this).parent().parent().siblings("input")
										.attr("checked", false);
							}
						}
					});
		});
	</script>

</body>
</html>